<template>
  <div class="container">
    <div class="container_title">
      <h1>柜⾯收付系统</h1>
    </div>
    <a-card
      class="login_panle_form"
      :loading="loading"
    >
      <slot />
      <a-form-model
        ref="loginFormModel"
        :model="loginForm"
        :rules="rules"
        @keyup.enter.native="submitForm"
      >
        <a-form-model-item prop="branchCode">
          <a-input
            v-model="loginForm.branchCode"
            placeholder="请输入分公司代码"
          >
            <template slot="prefix">
              <img
                :src="companySrc"
                class="imgs"
              >
            </template>
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="userCode">
          <a-input
            v-model="loginForm.userCode"
            placeholder="请输入用户名"
          >
            <template slot="prefix">
              <img
                :src="usernameSrc"
                class="imgs"
              >
            </template>
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password
            v-model="loginForm.password"
            placeholder="请输入密码"
          >
            <template slot="prefix">
              <img
                :src="passwordSrc"
                class="imgs"
              >
            </template>
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item prop="verifyCode">
          <a-row :gutter="10">
            <a-col :span="16">
              <a-input
                v-model="loginForm.verifyCode"
                placeholder="请输入验证码"
              >
              </a-input>
            </a-col>
            <a-col :span="4">
              <a
                @click="refreshImg"
                title="点击刷新验证码"
              >
                <img
                  :src="imageSrc"
                  class="img"
                >
              </a>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            type="primary"
            style="width: 100%; border-radius: 30px;"
            @click="submitForm"
            :loading="logging"
          >登 录</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import companyImg from "@/assets/company.png";
import usernameImg from "@/assets/username.png";
import passwordImg from "@/assets/password.png";

export default {
  name: "LoginForm",
  props: ["logging"],
  data() {
    const checkOrgCode = (rule, value, callback) => {
      if (value.length < 7) {
        return callback(new Error("请输入正确的分公司代码"));
      } else {
        callback();
      }
    };
    const checkUsername = (rule, value, callback) => {
      if (value.length > 2 && value.length < 20) {
        callback();
      } else {
        return callback(new Error("请输入正确的用户名"));
      }
    };
    const checkPassword = (rule, value, callback) => {
      console.log("pwd:", value);
      if (value.length < 6) {
        return callback(new Error("请输入正确的密码"));
      } else {
        callback();
      }
    };
    const checkVerifyCode = (rule, value, callback) => {
      console.log("VerifyCode:", value);
      if (value.length >= 5) {
        return callback(new Error("请输入正确的验证码"));
      } else {
        callback();
      }
    };
    return {
      companySrc: companyImg,
      usernameSrc: usernameImg,
      passwordSrc: passwordImg,
      imageSrc: "",
      loginForm: {
        branchCode: "",
        password: "",
        userCode: "",
        verifyCode: "",
        captcha: "",
        captchaKey: "",
        width: "",
        height: "",
      },
      rules: {
        branchCode: [{ validator: checkOrgCode, trigger: "blur" }],
        userCode: [{ validator: checkUsername, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
        verifyCode: [{ validator: checkVerifyCode, trigger: "blur" }],
      },
    };
  },
  mounted() {
    // this.loginVerify();
  },
  computed: {
    loading() {
      return false;
    },
  },
  methods: {
    submitForm() {
      this.$emit("onSubmit", this.loginForm);
      // this.$refs.loginFormModel.validate((valid) => {
      //   if (valid) {
      //     this.$emit("onSubmit", this.loginForm);
      //   }
      // });
    },
    refreshImg() {
      this.loginForm.verifyCode = "";
      this.loginVerify();
    },
    async loginVerify() {
      // const res =await verifyCode()
      // if (res.success) {
      //   const base64Blob = res.data.imgData
      //   this.imageSrc = 'data:image/gif;base64,' + base64Blob;
      //   this.loginForm.verifyCodeToken =res.data.token;
      // }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-form-item-control {
  line-height: 50px !important;
}
/deep/ .ant-input:not(:first-child) {
  padding-left: 45px;
}
.container {
  //box-shadow: -2px -3px 7px rgba(0, 0, 0, 0.2);
  width: 420px;
  /deep/.ant-input:not(:first-child) {
    padding-left: 45px;
  }
  /deep/.ant-card-body {
    padding: 5px 15px 5px 15px !important;
  }
  /deep/ .ant-form-item {
    margin-bottom: 12px;
    .ant-form-explain {
      position: absolute;
      width: 100%;
      top: 64px;
    }
  }
}
.imgs {
  width: 16px;
  height: 18px;
}
.container_title {
  text-align: center;
  h1 {
    color: #fff;
    margin-bottom: 40px;
    font-size: 1.875rem;
    font-family: MicrosoftYaHei;
    margin-right: 8px;
  }
}

.login_panle_form {
  background-color: #ffffff;
  backdrop-filter: blur(5px);
  padding: 40px 44px;
  border-radius: 10px;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2);
  height: 450px;
  .login_panle_form_title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .login_panle_form_title_p {
      font-size: 28px;
      padding-left: 20px;
      margin-bottom: 0em;
    }
  }
  .ant-form-item {
    margin-bottom: 8px !important;
  }
}
.img {
  max-width: 90px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 4px;
}
.vPic {
  display: inline-block;
  position: absolute;
  bottom: -5px;
  cursor: pointer;
}
</style>
